

<button nz-button nzType="primary" style="margin-bottom: 10px" (click)="add()">+ 新增</button>
<nz-table #basicTable
          [nzScroll]="{y: '540px' }"
          [nzLoading]="tableLoading"
          [nzFrontPagination]="false"
          [nzData]="listOfData">
  <thead>
  <tr>
    <th>会员名</th>
    <th>手机号</th>
<!--    <th>密码</th>-->
    <th>今日支付</th>
    <th>今日限额</th>
    <th>店铺</th>
    <th>添加时间</th>
    <th nzWidth="180px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of basicTable.data">
    <td>{{ data.name }}</td>
    <td>{{ data.moblie }}</td>
<!--    <td>{{ data.password }}</td>-->
    <td>{{ data.pay }}元<nz-progress [nzPercent]="(data.pay / data.funds)*100" [nzShowInfo]="false"></nz-progress></td>
    <td>
      <nz-input-group nzSuffix="元">
        <input type="number" [(ngModel)]="data.funds" (blur)="blurFund($event,data)"  nz-input />
      </nz-input-group></td>
    <td>{{ data.shops.length }}个店铺</td>
    <td>{{ data.gmtCreated }}</td>
    <td>
      <a nz-button nzType="link" (click)="edit(data)">修改</a>
      <a nz-button nzType="text" nzDanger
         nz-popconfirm
         nzPopconfirmTitle="是否删除该数据"
         nzPopconfirmPlacement="top"
         (nzOnConfirm)="deletedUser(data)">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<div style="text-align: center">
  <nz-pagination [nzPageIndex]="page" [nzTotal]="total" [nzShowTotal]="totalTemplate" (nzPageIndexChange)="changePage($event)"></nz-pagination>
  <ng-template #totalTemplate let-total>共 {{ total }} 条数据</ng-template>
</div>

<nz-modal
  nzTitle="店铺列表"
  [nzOkLoading]="okLoading"
  [(nzVisible)]="isVisible"
  [nzMaskClosable]="false"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()">
  <ng-container *nzModalContent>

  </ng-container>
</nz-modal>


<nz-modal
  [nzTitle]="modalTitle"
  [nzOkLoading]="okLoading"
  [(nzVisible)]="isVisible"
  [nzMaskClosable]="false"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="validateForm">

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="shopIds">绑定店铺</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入会员名">
          <nz-select formControlName="shopIds" nzMode="multiple"  nzPlaceHolder="请选择">
            <nz-option *ngFor="let option of shops" [nzLabel]="option.name" [nzValue]="option.id+''"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="moblie" nzRequired>手机号</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入手机号">
          <input nz-input formControlName="moblie" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">会员名</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入会员名">
          <input nz-input formControlName="name"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>登录密码</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入登录密码">
          <input nz-input formControlName="password"/>
        </nz-form-control>
      </nz-form-item>
<!--      <nz-form-item>-->
<!--        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="funds">今日限额</nz-form-label>-->
<!--        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入支付金额">-->
<!--          <input type="number" nz-input formControlName="funds" />-->
<!--        </nz-form-control>-->
<!--      </nz-form-item>-->


    </form>
  </ng-container>
</nz-modal>
